<template>
  <div class="history-playback">
    <div class="popclose">
      <el-icon size="24" color="#ffffff" style="cursor: pointer" @click="popclose">
        <Close />
      </el-icon>
    </div>
    <div class="history-playback-top">
      <div style="width: 400px">
         <el-date-picker
        v-model="searchParams.takeOffTime"
        start-placeholder="起飞时间"
        end-placeholder="降落时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        size="small"
        type="datetimerange"
        :default-time="defaultTime"
        popper-class="timePicker" />
      </div>
     
      <!-- <el-date-picker
        v-model="searchParams.takeOffEndTime"
        style="width: 180px"
        placeholder="降落时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        size="small"
        type="datetime"
        popper-class="timePicker" /> -->
      <!-- <el-input
        clearable
        style="width: 180px"
        v-model="searchParams.foundPlace"
        size="small"
        placeholder="请输入发现地点" /> -->
      <el-input
        v-model.lazy="searchParams.batchNum"
        style="width: 180px"
        placeholder="请输入无人机编号"
        size="small"
        clearable />
      <el-input
        v-model.lazy="searchParams.droneSeriaID"
        style="width: 180px"
        placeholder="请输入序列号"
        size="small"
        clearable />
      <el-select
        v-model="searchParams.type"
        popper-class="confirmadd_el-select-dropdown"
        placeholder="类型"
        style="width: 180px"
        clearable>
        <el-option :label="'雷达'" :value="1"> </el-option>
        <el-option :label="'AOA'" :value="2"> </el-option>
        <el-option label="白名单" :value="3"> </el-option>
        <el-option label="协议破解" :value="5"> </el-option>
      </el-select>
      <el-button @click="checkSearch(1)" size="small" class="search-box-btn"
        ><el-icon><Search /></el-icon> 搜索
      </el-button>
      <el-button @click="checkSearch(2)" size="small" class="search-box-cancel">
        <el-icon><RefreshRight /></el-icon>重置
      </el-button>
    </div>
    <div class="historydata-table">
      <el-table
        :data="historayDataArr"
        highlight-current-row
        style="width: 100%"
        header-cell-class-name="table_header"
        :empty-text="loading ? ' ' : '暂无数据'"
        v-loading="loading"
        element-loading-text="正在拼命加载中..."
        element-loading-background="rgba(16,41,65,0.3)">
        <el-table-column label="操作" width="60">
          <template #default="{ row }">
            <img
              src="/img/caozuo.png"
              alt=""
              class="iconActive"
              title="详情"
              @click="handleEdit(row)" />
          </template>
        </el-table-column>
        <el-table-column label="序号" width="80" type="index" :index="indexAdd"> </el-table-column>
        <el-table-column
          prop="takeoffTime"
          label="起飞时间"
          width="170"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="landingTime"
          label="降落时间"
          width="170"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="batchNo"
          label="无人机编号"
          width="200"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="droneSeriaID" label="序列号" width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="model" label="无人机型号" width="120" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120" :show-overflow-tooltip="true">
          <template #default="{ row }">
            {{
              row.type == 1
                ? '雷达'
                : row.type == 2
                ? 'AOA'
                : row.type == 3
                ? '白名单'
                : row.type == 4
                ? '白名单'
                : row.type == 5
                ? '协议破解'
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="frequency"
          label="频段（Ghz）"
          width="120"
          :formatter="formatterFrequency"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="lastsec"
          width="100"
          label="持续时间(s)"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="gpsDriverlongitude"
          width="130"
          label="飞手经度"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="gpsDriverlatitude"
          width="130"
          label="飞手纬度"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="gpsTakeofflongitude"
          width="130"
          label="起飞经度"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="gpsTakeofflatitude"
          width="130"
          label="起飞纬度"
          :show-overflow-tooltip="true">
        </el-table-column>
        <!-- <el-table-column
          prop="discoveryPlace"
          label="发现地点"
          width="260"
          :show-overflow-tooltip="true">
        </el-table-column> -->
      </el-table>
      <el-pagination
        class="pagination-box"
        small
        background
        @size-change="handleSizeChange"
        :hide-on-single-page="false"
        @current-change="handleCurrentChange"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        layout="total, prev, pager, next"
        :total="totalNum">
      </el-pagination>
    </div>
    <el-image
      style="width: 110px; height: 12px"
      src="/img/top-left.png"
      fit="fill"
      class="fixed-img1" />
    <el-image
      style="width: 110px; height: 12px"
      src="/img/top-right.png"
      fit="fill"
      class="fixed-img2" />
    <el-image
      style="width: 110px; height: 12px"
      src="/img/bottom-left.png"
      fit="fill"
      class="fixed-img3" />
    <el-image
      style="width: 110px; height: 12px"
      src="/img/bottom-right.png"
      fit="fill"
      class="fixed-img4" />
  </div>
</template>

<script setup>
  import { onMounted, ref, computed } from 'vue'
  import { comdetect } from '@/api/home.js'
  import { useCompanyInfoStore } from '@/stores/platform'
  import { useHistoryStore } from '@/stores/history'
  import dayjs from 'dayjs/esm/index.js'
  const searchParams = ref({
    takeOffTime:[],
    takeOffStartTime: '',
    takeOffEndTime: '',
    foundPlace: '',
    batchNum: '',
    droneSeriaID: '',
    type: '',
    pageNum: 1,
    pageSize: 11,
  })
  const totalNum = ref(0)
  const loading = ref(false)
  const emit = defineEmits(['closeHistory', 'historydata'])
  let historayDataArr = ref([])
  // 默认时间
  let defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(),
]

  /**
   * @description:关闭弹窗
   */
  const popclose = () => {
    emit('closeHistory', 'historical')
  }
  /**
   * @description:搜索栏查询
   */
  const checkSearch = (index) => {
    if (index == 2) {
      searchParams.value = {
        takeOffTime: [],
        takeOffStartTime: '',
        takeOffEndTime: '',
        foundPlace: '',
        batchNum: '',
        droneSeriaID: '',
        type: '',
        pageNum: 1,
        pageSize: 11,
      }
    }
    searchParams.value.takeOffStartTime=''
    searchParams.value.takeOffEndTime=''
    if(searchParams.value.takeOffTime?.length>0){
      searchParams.value.takeOffStartTime=searchParams.value.takeOffTime[0]
      searchParams.value.takeOffEndTime=searchParams.value.takeOffTime[1]
    }

    hist_comdetect()
  }
  /**
   * @description:点击查看历史详情
   */
  const handleEdit = (item) => {
    if (item) {
      emit('historydata', item,'history')
      popclose()
    }
  }
  /**
   * @description: 连续翻页序号不刷新
   * @params {index} 当前下标
   */
  const indexAdd = (index) => {
    const page = searchParams.value.pageNum // 当前页码
    const pagesize = searchParams.value.pageSize // 每页条数
    return index + 1 + (page - 1) * pagesize
  }
  /**
   * @description: 对表格数据进行处理
   */
  const formatterFrequency = (item) => {
    let data = item.frequency !== 'null' ? Number(item.frequency).toFixed(2) : ''
    return data
  }
  /**
   * @description: 当前页数
   * @param {*} val  页数
   */
  const handleSizeChange = (val) => {
    searchParams.value.pageSize = val
    hist_comdetect()
  }
  /**
   * @description: 当前页码
   * @param {*} val 页码
   */
  const handleCurrentChange = (val) => {
    searchParams.value.pageNum = val
    hist_comdetect()
  }
  /**
   * @description: 获取侦测列表历史数据
   */
  const hist_comdetect = async () => {
    let param = {}
    loading.value=true
    Object.keys(searchParams.value).forEach(function (key) {
      if (searchParams.value[key]!=='') {
        param[key] = searchParams.value[key]
      }
    })
    delete param.takeOffTime
    const res = await comdetect(param)
    if(res.current){
      historayDataArr.value = res.records
    totalNum.value = res.total
    }
    setTimeout(()=>{
      loading.value=false
    },500)
    
  }
  onMounted(() => {
    hist_comdetect()
  })
</script>
<style lang="scss" scoped>
  .history-playback {
    position: absolute;
    right: 40px;
    left: 40px;
    top: 150px;
    bottom: 100px;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 25px;
    box-sizing: border-box;
    z-index: 100;
    .popclose {
      display: flex;
      justify-content: flex-end;
    }
    .history-playback-top {
      width: 70%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      :deep(.el-input__wrapper) {
        color: #ffffff;
        border-radius: 5px;
        border: 1px solid #408fd6;
        background: rgba(12, 37, 63, 0.4);
        box-shadow: unset;
        height: 30px !important;
        box-sizing: border-box;
      }
      :deep(.el-input__inner) {
        color: #ffffff;
      }
      .search-box-btn {
        height: 30px;
        border-radius: 0;
        background: linear-gradient(90deg, #21A4D7 0%, #1550AB 100%);
        border: 1px solid #80EBFD;
        margin-left: 2%;
        color: #fff;
      }
      .search-box-btn:hover{
        border-radius:2px;
        box-shadow:0px 0px 5px 1px #80EBFD;
      }
      .search-box-cancel {
        height: 30px;
        border-radius: 0;
        background: linear-gradient(90deg, #df792a 0%, #f3893e 100%);
        border: 1px solid #fda780;
        margin-left: 1%;
        color: #fff;
      }
      .search-box-cancel:hover{
        border-radius:2px;
        box-shadow:0px 0px 5px 1px #fda780;
      }
    }
    .fixed-img1 {
      position: absolute;
      top: 2px;
      left: 2px;
    }
    .fixed-img2 {
      position: absolute;
      top: 2px;
      right: 2px;
    }
    .fixed-img3 {
      position: absolute;
      bottom: 2px;
      left: 2px;
    }
    .fixed-img4 {
      position: absolute;
      bottom: 2px;
      right: 2px;
    }
    animation: top_move 1s;
  }
  @keyframes top_move {
    0% {
      opacity: 0;
      -webkit-transform: translateY(300px);
    }
    25% {
      opacity: 1;
      -webkit-transform: translateY(0px);
    }
    40% {
      -webkit-transform: translateY(18px);
    }
    55% {
      -webkit-transform: translateY(0px);
    }
    70% {
      -webkit-transform: translateY(2px);
    }
    85% {
      -webkit-transform: translateY(0px);
    }
    100% {
      -webkit-transform: translateY(0);
    }
  }
</style>
<style lang="scss">
  @import '/public/assets/tablePicker.scss';
  .el-select__wrapper {
    border: 1px solid #408fd6;
    box-shadow: none;
    background-color: rgba(12, 37, 63, 0.4);
    min-height: 30px !important;
  }
</style>
<style lang="scss" scoped>
:deep(.el-range-input){
  color: #fff;
}
  .historydata-table {
    /* height: 50px;
    overflow: scroll; */
    :deep(.el-table) {
      --el-table-border-color: transparent;
      --el-table-border: none;
      --el-table-text-color: #bdbdbe;
      --el-table-header-text-color: #bdbdbe;
      --el-table-row-hover-bg-color: transparent;
      --el-table-current-row-bg-color: transparent;
      --el-table-header-bg-color: rgba(255, 255, 255, 0.2);
      --el-table-bg-color: transparent;
      --el-table-tr-bg-color: transparent;
      --el-table-expanded-cell-bg-color: transparent;
    }
    /*  */
    :deep(.el-table tr:nth-child(even)) {
      background: rgba(255, 255, 255, 0.2) !important;
    }
    :deep(.el-table tr:nth-child(odd)) {
      background: transparent !important;
    }
    .pagination-box {
      width:100%;
      position:absolute;
      bottom:20px;
      justify-content: center;
      // margin-top: 20px;
    }
    /* 分页 */
    :deep(.equipment-table-pagination) {
      display: flex;
      justify-content: center;
    }
    :deep(.el-pager li) {
      background: none;
      color: #fff;
    }
    :deep(.el-pagination.is-background .el-pager li:not(.disabled).active),
    :deep(.el-pagination.is-background .el-pager li.is-active) {
      background: none;
      color: #00fcfa;
    }
    :deep(.el-pagination .btn-next),
    :deep(.el-pagination .btn-prev) {
      background: none !important;
      color: rgba(255, 255, 255, 1);
    }
    :deep(.el-pagination button),
    :deep(.el-pagination span) {
      font-size: 14px;
      color: #fff;
    }
    :deep(.el-pagination.is-background .el-pager li) {
      background-color: transparent;
    }
  }
  .iconActive {
    cursor: pointer;
  }
</style>
<style lang="scss">
  .timePicker {
    border: none !important;
    :deep(.el-picker-panel) {
      border: 1px solid #2daef1;
    }
    .el-input__wrapper {
      background-color: transparent !important;
      box-shadow: 0 0 0 1px #2790c8 inset;
    }
    .el-picker-panel,
    .el-picker-panel__footer {
      border: 1px solid #408fd6;
    }
    .el-picker-panel .el-time-panel {
      background-color: #12385b !important;
      box-shadow: 0 0 0 1px #2790c8 inset;
      border: none;
    }
    .el-time-spinner__item.is-active:not(.is-disabled) {
      color: #fff;
    }
    .el-popper__arrow:before {
      background-color: #12385b !important;
      border-color: #12385b !important;
    }
    .el-button.is-plain {
      background-color: #408fd6;
      border: 1px solid #408fd6;
      color: #fff;
    }
  }
</style>
